<template>
  <view class="practice-container">
    <!-- 顶部操作栏 -->
    <view class="practice-header">
      <uv-icon name="arrow-left" size="28" color="#333" @click="goBack" />
      <!-- <view class="practice-header-actions">
        <uv-icon
          name="play-circle"
          size="28"
          color="#4ECDC4"
          class="header-action"
        />
        <uv-icon
          name="pause-circle"
          size="28"
          color="#fa3534"
          class="header-action"
        />
      </view> -->
      <!-- <view class="practice-header-actions" style="gap: 0">
        <uv-icon name="mic" size="28" color="#fa3534" class="header-action" />
        <text class="recording-status">录音中</text>
      </view>

    
       <uv-button @click="endInterviewAction"  class="end-btn">结束面试</uv-button> -->
      <view class="header-menu-container">
        <uv-icon
          size="24"
          name="more-dot-fill"
          @click="toggleHeaderMenu"
        ></uv-icon>

        <!-- 头部下拉菜单 -->
        <view v-show="showHeaderMenu" class="header-dropdown-menu" @click.stop>
          <view class="menu-item">
            <yjy-switch
              @switchFunction="switchChangeFun"
              :switchType="'icon'"
              :defaultColor="'#36b1ab'"
              :highColor="'#FFFFFF'"
              :defaultValue="switchDefaultValue"
              :switchList="switchListIcon"
              :itemIndex="0"
            ></yjy-switch>
          </view>
          <view class="menu-item">
            <uv-button
              @click="endInterviewAction"
              class="menu-end-btn"
              type="error"
              size="small"
              >结束面试</uv-button
            >
          </view>
        </view>
      </view>
    </view>

    <!-- 主面试官头像和右上角小头像 -->
    <view class="practice-avatar-area" v-if="switchDefaultValue == 1">
      <image
        class="main-avatar"
        src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80"
        mode="aspectFill"
      />
      <view class="user-avatar-card">
        <image
          class="user-avatar-img"
          src="https://randomuser.me/api/portraits/men/32.jpg"
          mode="aspectFill"
        />
        <view class="user-avatar-footer">
          <uv-icon
            name="mic"
            color="#4ecdc4"
            size="22"
            style="margin-right: 6rpx"
          />
          <text class="user-id">用户5875</text>
        </view>
      </view>
    </view>
    <view class="practice-avatar-area" v-else>
      <view class="chat-container">
        <view
          v-for="(item, idx) in chatList"
          :key="idx"
          :class="['chat-message', item.role]"
        >
          <view class="chat-avatar" :class="item.role">
            <uv-icon
              name="account"
              size="20"
              :color="item.role === 'interviewer' ? '#fff' : '#fff'"
            />
          </view>
          <view :class="['chat-bubble', item.role]">
            <view class="chat-text">
              <view v-if="item.isLoading" class="loading-dots">
                <text class="dot"></text>
                <text class="dot"></text>
                <text class="dot"></text>
              </view>
              <text v-else v-for="(line, i) in item.text.split('\n')" :key="i">
                {{ line }}<br v-if="i !== item.text.split('\n').length - 1" />
              </text>
            </view>
          </view>
        </view>
      
        <view style="height: 100px" v-if="!detailId"></view>
      </view>
    </view>

    <!-- </lime-floating-panel> -->
    <l-floating-panel
      v-model:height="panelHeight"
      :anchors="anchors"
      v-if="anchors"
    >
      <view>
       
          <!-- 问题文本区和开始回答按钮 -->
          <view class="practice-question-area" v-if="switchDefaultValue == 1">
            <uv-button shape="circle" class="answer-btn" @click="recordStart">
              <uv-icon
                name="mic"
                color="#555"
                size="28"
                style="margin-right: 8rpx"
              />
              开始回答
            </uv-button>
            <view class="question-text">
              {{ currentQuestion.question || "正在加载问题..." }}
            </view>
          </view>
           <!-- 语音操作区 -->
        <view
          class="voice-panel"
          v-if="!detailId&&switchDefaultValue == 0"
        >
          <!-- 输入方式切换tabs -->
          <view class="input-mode-tabs">
            <view
              class="tab-item"
              :class="{ active: inputMode === 'text' }"
              @click="switchInputMode('text')"
            >
              文字
            </view>
            <view
              class="tab-item"
              :class="{ active: inputMode === 'voice' }"
              @click="switchInputMode('voice')"
            >
              语音
            </view>
          </view>

          <!-- 语音输入模式 -->
          <view v-if="inputMode === 'voice'" class="voice-input-section">
            <view class="voice-hint">点按开始回答，再次点按结束</view>
            <view class="voice-btn-wrap">
              <button class="voice-btn" @click="recordStart">
                <uv-icon name="mic" size="48" color="#36d1c4" />
              </button>
            </view>
          </view>

          <!-- 文字输入模式 -->
          <view v-if="inputMode === 'text'" class="text-input-section">
            <textarea
              v-model="answer"
              placeholder="请在此输入您的回答..."
              class="answer-textarea"
              :rows="3"
               maxlength="1000"
            ></textarea>
          </view>

          <!-- 操作按钮 -->
          <div class="action-buttons" v-if="inputMode === 'text'">
            <uv-button @click="sendAnswer" type="primary" class="send-btn"
              >发送</uv-button
            >
          </div>
        </view>
        
        <view>
          <!-- 底部tab切换 -->
          <!-- <lime-floating-panel v-model:height="panelHeight" :anchors="anchors"> -->
          <view class="practice-tabs-card">
            <view class="practice-tabs">
              <view
                :class="['tab-item', activeTab === 'process' ? 'active' : '']"
                @click="activeTab = 'process'"
              >
                <uv-icon
                  name="chat"
                  size="28"
                  :color="activeTab === 'process' ? '#36d1c4' : '#bbb'"
                  style="margin-right: 8rpx"
                />
                <text>面试过程</text>
                <view
                  v-if="activeTab === 'process'"
                  class="tab-underline"
                ></view>
              </view>
              <view
                :class="['tab-item', activeTab === 'result' ? 'active' : '']"
                @click="activeTab = 'result'"
              >
                <uv-icon
                  name="empty-news"
                  size="28"
                  :color="activeTab === 'result' ? '#36d1c4' : '#bbb'"
                  style="margin-right: 8rpx"
                />
                <text>面试结果</text>
                <view
                  v-if="activeTab === 'result'"
                  class="tab-underline"
                ></view>
              </view>
            </view>
          </view>

          <!-- 面试问题卡片（仅面试过程tab下显示） -->
          <view v-if="activeTab === 'process'" class="practice-qa-section">
            <view class="qa-card">
              <view class="qa-label">面试官问题</view>
              <view class="qa-content">
                <view>{{ aiStrategy }}</view>
              </view>
            </view>
            <view class="qa-card">
              <view class="qa-label">AI答题策略</view>
              <view class="qa-content">
                <view>{{ aiReview }}</view>
              </view>
            </view>
            <!-- 用户回答卡片 -->
            <view class="qa-card user-answer-card">
              <view class="user-answer-title">用户回答</view>
              <view class="user-answer-eval">
                <view class="user-answer-eval-label">回答评估</view>
                <view class="user-answer-score-row">
                  <text class="user-answer-score-label">专业性</text>
                  <view class="user-answer-score-bar-bg">
                    <view
                      class="user-answer-score-bar"
                      :style="{
                        width: (answerEval.professionalism || 0) + '%',
                      }"
                    ></view>
                  </view>
                  <text class="user-answer-score-value">{{
                    (answerEval.professionalism || 0) / 10
                  }}</text>
                </view>
                <view class="user-answer-score-row">
                  <text class="user-answer-score-label">完整性</text>
                  <view class="user-answer-score-bar-bg">
                    <view
                      class="user-answer-score-bar"
                      :style="{ width: (answerEval.completeness || 0) + '%' }"
                    ></view>
                  </view>
                  <text class="user-answer-score-value">{{
                    (answerEval.completeness || 0) / 10
                  }}</text>
                </view>
                <view class="user-answer-score-row">
                  <text class="user-answer-score-label">相关性</text>
                  <view class="user-answer-score-bar-bg">
                    <view
                      class="user-answer-score-bar"
                      :style="{ width: (answerEval.logic || 0) + '%' }"
                    ></view>
                  </view>
                  <text class="user-answer-score-value">{{
                    (answerEval.logic || 0) / 10
                  }}</text>
                </view>
              </view>
              <view class="user-answer-adv-row">
                <text class="user-answer-adv-label">优点：</text>
                <text class="user-answer-adv-content">{{
                  answerEval.pros || "—"
                }}</text>
              </view>
              <view class="user-answer-bad-row">
                <text class="user-answer-bad-label">不足：</text>
                <text class="user-answer-bad-content">{{
                  answerEval.cons || "—"
                }}</text>
              </view>
              <view class="user-answer-suggest-title">改进建议</view>
              <view class="user-answer-suggest-list">
                <view
                  v-if="
                    !answerEval.suggestions ||
                    answerEval.suggestions.length === 0
                  "
                  >—</view
                >
                <view v-else v-for="(sug, i) in answerEval.suggestions" :key="i"
                  >{{ i + 1 }}. {{ sug }}</view
                >
              </view>
            </view>
          </view>
          <!-- 面试结果tab下内容 -->
          <view v-if="activeTab === 'result'" class="practice-result-section">
            <view class="result-analysis-card">
              <view class="result-analysis-title">表现分析</view>
              <view class="result-score-card">
                <view class="result-score-value">86</view>
                <view class="result-score-desc">优秀</view>
              </view>
              <view class="result-analysis-chart">
                <!-- 这里可替换为实际雷达图组件或图片 -->
                <qq-ld />
              </view>
            </view>
            <view class="result-summary-card">
              <view class="result-summary-title">综合评价</view>
              <view class="result-summary-content">
                您在本次面试中表现优秀，专业技能和逻辑清晰度表现突出，能够准确理解面试官问题并给予专业的回答。沟通流畅，表达清晰。<br />
                技术方面的回答专业且有深度，项目经验丰富且具有说明力。在情绪稳定性和学习能力方面有进一步提升空间。
              </view>
            </view>
            <view class="result-suggest-card">
              <view class="result-suggest-title">提升建议</view>
              <view class="result-suggest-list">
                <view class="result-suggest-item">
                  <uv-icon
                    name="star"
                    size="24"
                    color="#36d1c4"
                    style="margin-right: 8rpx"
                  />
                  <view class="result-suggest-item-main">
                    <view class="result-suggest-item-title"
                      >注意回答的结构化</view
                    >
                    <view class="result-suggest-item-desc"
                      >可以更有意识地使用STAR法则（情境-任务-行动-结果）构建回答，增强回答的逻辑性和完整性。</view
                    >
                  </view>
                </view>
                <view class="result-suggest-item">
                  <uv-icon
                    name="star"
                    size="24"
                    color="#36d1c4"
                    style="margin-right: 8rpx"
                  />
                  <view class="result-suggest-item-main">
                    <view class="result-suggest-item-title">强化数据支持</view>
                    <view class="result-suggest-item-desc"
                      >在描述项目成果时，可以提供更多具体的数据指标，使成果更具说服力。</view
                    >
                  </view>
                </view>
                <view class="result-suggest-item">
                  <uv-icon
                    name="star"
                    size="24"
                    color="#36d1c4"
                    style="margin-right: 8rpx"
                  />
                  <view class="result-suggest-item-main">
                    <view class="result-suggest-item-title"
                      >展示团队协作能力</view
                    >
                    <view class="result-suggest-item-desc"
                      >适当增加对团队协作经历的描述，突出自己的团队角色和贡献点。</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </l-floating-panel>
    <!-- <lime-floating-panel /> -->
  </view>

  <!-- 面试结束确认弹窗 -->
  <view v-if="showExitModal" class="exit-modal-mask">
    <view class="exit-modal-container">
      <view class="exit-modal-content">
        <view class="exit-modal-title">面试已结束</view>
        <view class="exit-modal-message">是否离开当前页面？</view>
        <view class="exit-modal-buttons">
          <uv-button
            class="exit-modal-cancel-btn"
            @click="showExitModal = false"
          >
            留在当前页面
          </uv-button>
          <uv-button
            class="exit-modal-confirm-btn"
            type="primary"
            @click="confirmExit"
          >
            离开
          </uv-button>
        </view>
      </view>
    </view>
  </view>

  <!-- 语音输入遮罩层 -->
  <view v-if="showVoiceMask" class="voice-mask">
    <view class="voice-container">
      <!-- 红框区域 -->
      <view class="voice-box">
        <!-- 摄像头画面占位 -->

        <!-- 语音转文字显示区域 -->
        <view class="asr-text-container">
          <text class="asr-text">{{ asrText || "正在聆听..." }}</text>
        </view>
      </view>

      <!-- 音浪波纹 -->
      <view class="wave-container">
        <view class="wave-bar">
          <view
            v-for="(item, index) in waveBars"
            :key="index"
            class="wave-item"
            :class="{ 'wave-active': isRecording }"
            :style="{ animationDelay: index * 0.1 + 's' }"
          ></view>
        </view>
      </view>

      <!-- 结束回答按钮 -->
      <button class="end-answer-btn" @click="endAnswer">结束回答</button>
    </view>
  </view>

  <!-- 如果 lime-floating-panel 不生效，可用 l-floating-panel 替换标签名 -->

  <!-- 菜单背景遮罩层 -->
  <view v-if="showHeaderMenu" class="menu-overlay" @click="hideHeaderMenu"></view>
</template>

<script>
import YjySwitch from "@/components/yjy-switch/yjy-switch.vue";
import QqLd from "@/components/qq-ld/qq-ld.vue";
import lfloatingpanel from "@/uni_modules/lime-floating-panel/components/l-floating-panel/l-floating-panel.vue";
import limefloatingpanel from "@/uni_modules/lime-floating-panel/components/lime-floating-panel/lime-floating-panel.vue";
import XfVoiceDictation from "@/utils/js/xf-voice-dictation.js";
import {
  startAnswer,
  replyAnswer,
  endInterview,
  interviewDetail,
} from "@/api/interview";
export default {
  components: {
    YjySwitch,
    QqLd,
    lfloatingpanel,
    limefloatingpanel,
  },
  data() {
    return {
      answer: "",
      inputMode: "voice", // 输入模式：'text' 或 'voice'
      showExitModal: false, // 面试结束确认弹窗
      showHeaderMenu: false, // 头部下拉菜单显示状态
      activeTab: "process",
      switchListIcon: [],
      switchDefaultValue: 0,
      //图标switch可选值，value为字体图标名称。仅支持2个值
      switchListIcon: [
        {
          title: "chat",
          value: 0,
        },
        {
          title: "camera-fill",
          value: 1,
        },
      ],
      anchors: null,
      panelHeight: "",
      // 当前问题信息
      currentQuestion: {
        id: 0,
        question: "",
        aiReview: "",
        aiStrategy: "",
        aiDemo: "",
      },
      // 回答评估（变量绑定）
      answerEval: {
        professionalism: 0, // 专业性 0-100
        completeness: 0, // 完整性 0-100
        logic: 0, // 条理性 0-100
        pros: "", // 优点
        cons: "", // 不足
        suggestions: [], // 改进建议（数组）
      },
      chatList: [],
      xfVoice: "",
      // 语音输入相关
      showVoiceMask: false,
      asrText: "",
      isRecording: false,
      aiReview: "",
      aiStrategy: "",
      detailId: null,
      waveBars: Array.from({ length: 8 }, (_, i) => i), // 8个音浪条
    };
  },
  methods: {
    // 切换输入模式
    switchInputMode(mode) {
      this.inputMode = mode;
    },
    // 切换头部菜单
    toggleHeaderMenu() {
      this.showHeaderMenu = !this.showHeaderMenu;
    },
    // 隐藏头部菜单
    hideHeaderMenu() {
      this.showHeaderMenu = false;
    },
    // 滚动聊天容器到底部
    scrollToBottom() {
      const query = uni.createSelectorQuery().in(this);
      query.select('.chat-container').boundingClientRect();
      query.exec((res) => {
        if (res[0]) {
          uni.pageScrollTo({
            scrollTop: res[0].height + res[0].top,
            duration: 300
          });
        }
      });
    },
    // 确认退出
    confirmExit() {
      this.showExitModal = false;
      uni.navigateBack();
    },
    goBack() {
      uni.navigateBack();
    },
    switchChangeFun(val) {
      //重新赋值，改变该值用于设置switch默认值
      this.switchDefaultValue = val.swithcSelectItem.value;
    },
    recordCompleted() {
      let that = this;
      this.xfVoice = new XfVoiceDictation({
        APPID: "cedbc434",
        APIKey: "43e30ffe38052d23b1c0d197033d6db3",
        onWillStatusChange: function (oldStatus, newStatus) {
          //可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
        },
        onTextChange: function (text) {
          console.log("检查的文字", text);
          if (text) {
            that.asrText = text;
          }
        },
      });
    },
    recordStart() {
      // 显示语音输入遮罩
      this.showVoiceMask = true;
      this.isRecording = true;
      this.asrText = "";

      // 启动语音识别
      if (this.xfVoice) {
        this.xfVoice.start();
      }
    },
    endAnswer() {
      // 隐藏语音输入遮罩
      this.showVoiceMask = false;
      this.isRecording = false;

      // 停止语音识别
      if (this.xfVoice) {
        this.xfVoice.stop();
      }

      // 如果有识别到的文字，可以添加到聊天记录中
      if (this.asrText.trim()) {
        this.chatList.push({
          role: "user",
          name: "我",
          time: new Date().toLocaleTimeString("zh-CN", {
            hour: "2-digit",
            minute: "2-digit",
          }),
          avatar: "https://example.com/dog.jpg",
          text: this.asrText,
        });
      }
    },
    sendAnswer() {
      if (!this.answer.trim()) {
        uni.showToast({
          title: "请输入回答内容",
          icon: "error",
        });
        return;
      }

      // 先显示用户的回答
      this.chatList.push({
        role: "user",
        name: "我",
        time: new Date().toLocaleTimeString("zh-CN", {
          hour: "2-digit",
          minute: "2-digit",
        }),
        avatar: "https://example.com/dog.jpg",
        text: this.answer.trim(),
      });

      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });

      // 清空输入框
      const userAnswer = this.answer.trim();
      this.answer = "";

      // 添加一个loading状态的AI提问
      const loadingQuestionId = Date.now(); // 临时ID
      this.chatList.push({
        role: "interviewer",
        name: "面试官",
        time: new Date().toLocaleTimeString("zh-CN", {
          hour: "2-digit",
          minute: "2-digit",
        }),
        avatar: "https://example.com/cat.jpg",
        text: "",
        isLoading: true,
        tempId: loadingQuestionId,
      });

      // 发送请求
      replyAnswer({
        interviewId: this.$route.query.interviewId,
        questionId: this.currentQuestion.id,
        content: userAnswer,
      })
        .then((res) => {
          console.log("回答发送成功:", res);
          if (res.data.result) {
            this.chatList.push({
              role: "interviewer",
              name: "面试官",
              time: new Date().toLocaleTimeString("zh-CN", {
                hour: "2-digit",
                minute: "2-digit",
              }),
              avatar: "https://example.com/cat.jpg",
              text: res.data.endMessage,
            });
            this.showExitModal = true;
            return;
          }

          // 先移除loading状态的临时提问
          const loadingIndex = this.chatList.findIndex(
            (item) => item.tempId === loadingQuestionId
          );
          if (loadingIndex !== -1) {
            this.chatList.splice(loadingIndex, 1);
          }

          // 处理下一个问题
          if (res.data && res.data.nextQuestion) {
            const nextQuestion = res.data.nextQuestion;

            // 将下一个问题添加到聊天列表
            this.chatList.push({
              role: "interviewer",
              name: "面试官",
              time: new Date().toLocaleTimeString("zh-CN", {
                hour: "2-digit",
                minute: "2-digit",
              }),
              avatar: "https://example.com/cat.jpg",
              text: nextQuestion.question || "请回答下一个问题...",
            });

            // 滚动到底部
            this.$nextTick(() => {
              this.scrollToBottom();
            });

            // 更新当前问题信息
            this.currentQuestion = {
              id: nextQuestion.id,
              question: nextQuestion.question,
              aiReview: nextQuestion.aiReview,
              aiStrategy: nextQuestion.aiStrategy,
              aiDemo: nextQuestion.aiDemo,
            };
          }

          // 如果返回评估数据则填充评分/建议
          if (res.data && res.data.evaluation) {
            const e = res.data.evaluation;
            this.answerEval = {
              professionalism:
                typeof e.professionalism === "number" ? e.professionalism : 0,
              completeness:
                typeof e.completeness === "number" ? e.completeness : 0,
              logic: typeof e.logic === "number" ? e.logic : 0,
              pros: e.pros || "",
              cons: e.cons || "",
              suggestions: Array.isArray(e.suggestions) ? e.suggestions : [],
            };
          } else if (
            res.data &&
            (res.data.majorScore != null ||
              res.data.completeScore != null ||
              res.data.relevanceScore != null)
          ) {
            // 兼容后端返回的另一种结构
            this.answerEval = {
              professionalism:
                typeof res.data.majorScore === "number"
                  ? res.data.majorScore * 10
                  : 0,
              completeness:
                typeof res.data.completeScore === "number"
                  ? res.data.completeScore * 10
                  : 0,
              logic:
                typeof res.data.relevanceScore === "number"
                  ? res.data.relevanceScore * 10
                  : 0,
              pros: res.data.advantage || "",
              cons: res.data.deficiency || "",
              suggestions: res.data.improvementSuggestion
                ? [res.data.improvementSuggestion]
                : [],
            };
          }
          // 处理 question 数据，可能是对象或数组
          if (res.data.question) {
            if (Array.isArray(res.data.question) && res.data.question.length > 0) {
              // 如果是数组，取第一个元素
              this.aiReview = res.data.question[0].aiReview;
              this.aiStrategy = res.data.question[0].aiStrategy;
            } else if (typeof res.data.question === 'object') {
              // 如果是对象，直接访问
              this.aiReview = res.data.question.aiReview;
              this.aiStrategy = res.data.question.aiStrategy;
            }
          }
          uni.showToast({
            title: "回答已发送",
            icon: "success",
          });
        })
        .catch((err) => {
          console.error("发送回答失败:", err);
          uni.showToast({
            title: err.message || "发送失败",
            icon: "error",
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    endInterviewAction() {
      const interviewId =
        this.$route && this.$route.query ? this.$route.query.interviewId : "";
      if (!interviewId) {
        uni.showToast({ title: "缺少面试ID", icon: "error" });
        return;
      }
      uni.showLoading({ title: "结束中...", mask: true });
      endInterview({ interviewId })
        .then((res) => {
          this.showExitModal = true;
        })
        .catch((err) => {
          console.error("结束面试失败:", err);
          uni.showToast({ title: err.message || "结束失败", icon: "error" });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    startTheAnswer() {
      console.log(this.$route);
      uni.showLoading({ title: "面试准备中...", mask: true });
      startAnswer({
        interviewId: this.$route.query.interviewId,
      })
        .then((res) => {
          console.log("获取到第一个问题:", res);
          if (res && res.data && Array.isArray(res.data) && res.data.length > 0) {
            // 清空聊天列表
            this.chatList = [];

            // 遍历所有对话数据
            res.data.forEach((dialog, index) => {
              // 添加面试官的问题
              this.chatList.push({
                role: "interviewer",
                name: "面试官",
                time: dialog.createTime ? new Date(dialog.createTime).toLocaleTimeString("zh-CN", {
                  hour: "2-digit",
                  minute: "2-digit",
                }) : new Date().toLocaleTimeString("zh-CN", {
                  hour: "2-digit",
                  minute: "2-digit",
                }),
                avatar: "https://example.com/cat.jpg",
                text: dialog.question || "请开始您的回答...",
              });

              // 如果有用户回答，添加用户回答
              if (dialog.userAnswer && dialog.userAnswer.trim()) {
                this.chatList.push({
                  role: "user",
                  name: "我",
                  time: dialog.updateTime ? new Date(dialog.updateTime).toLocaleTimeString("zh-CN", {
                    hour: "2-digit",
                    minute: "2-digit",
                  }) : new Date().toLocaleTimeString("zh-CN", {
                    hour: "2-digit",
                    minute: "2-digit",
                  }),
                  avatar: "https://example.com/dog.jpg",
                  text: dialog.userAnswer.trim(),
                });
              }
            });

            // 获取最后一个问题作为当前问题（用于后续回答）
            const lastDialog = res.data[res.data.length - 1];
            this.currentQuestion = {
              id: lastDialog.id,
              question: lastDialog.question,
              aiReview: lastDialog.aiReview,
              aiStrategy: lastDialog.aiStrategy,
              aiDemo: lastDialog.aiDemo,
            };
            this.aiReview = lastDialog.aiReview;
            this.aiStrategy = lastDialog.aiStrategy;
          } else if (res && res.data && !Array.isArray(res.data)) {
            // 兼容旧的对象格式
            this.chatList = [];
            this.chatList.push({
              role: "interviewer",
              name: "面试官",
              time: new Date().toLocaleTimeString("zh-CN", {
                hour: "2-digit",
                minute: "2-digit",
              }),
              avatar: "https://example.com/cat.jpg",
              text: res.data.question || "请开始您的回答...",
            });

            this.currentQuestion = {
              id: res.data.id,
              question: res.data.question,
              aiReview: res.data.aiReview,
              aiStrategy: res.data.aiStrategy,
              aiDemo: res.data.aiDemo,
            };
            this.aiReview = res.data.aiReview;
            this.aiStrategy = res.data.aiStrategy;
          }
        })
        .catch((err) => {
          console.error("获取第一个问题失败:", err);
          uni.showToast({
            title: "获取问题失败",
            icon: "error",
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    // 获取面试详情
    getInterviewDetail(detailId) {
      if (!detailId) {
        uni.showToast({
          title: "面试ID无效",
          icon: "error",
        });
        return;
      }

      uni.showLoading({
        title: "加载面试详情...",
        mask: true,
      });

      interviewDetail({ interviewId: detailId })
        .then((res) => {
          uni.hideLoading();
          if (res && res.data) {
            console.log("面试详情数据:", res.data);

            // 处理面试详情数据，将 intvInterviewDialogResps 转换为 chatList
            if (
              res.data.intvInterviewDialogResps &&
              Array.isArray(res.data.intvInterviewDialogResps)
            ) {
              const sortedDialogs = res.data.intvInterviewDialogResps
                .slice()
                .sort((a, b) => {
                  const at = a.createTime ? new Date(a.createTime).getTime() : 0;
                  const bt = b.createTime ? new Date(b.createTime).getTime() : 0;
                  return at - bt; // 正序排列：老的在前，新的在后
                });

              this.chatList = sortedDialogs
                .map((dialog) => {
                  // 面试官问题
                  const interviewerMessage = {
                    role: "interviewer",
                    name: "面试官",
                    time: dialog.createTime
                      ? new Date(dialog.createTime).toLocaleTimeString(
                          "zh-CN",
                          {
                            hour: "2-digit",
                            minute: "2-digit",
                          }
                        )
                      : new Date().toLocaleTimeString("zh-CN", {
                          hour: "2-digit",
                          minute: "2-digit",
                        }),
                    avatar: "https://example.com/cat.jpg",
                    text: dialog.question || "请开始您的回答...",
                    questionId: dialog.questionId,
                    id: dialog.id,
                  };

                  // 用户回答
                  const userMessage = {
                    role: "user",
                    name: "我",
                    time: dialog.createTime
                      ? new Date(dialog.createTime).toLocaleTimeString(
                          "zh-CN",
                          {
                            hour: "2-digit",
                            minute: "2-digit",
                          }
                        )
                      : new Date().toLocaleTimeString("zh-CN", {
                          hour: "2-digit",
                          minute: "2-digit",
                        }),
                    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
                    text: dialog.userAnswer || "",
                    id: dialog.id,
                  };

                  // 保存当前问题信息
                  this.currentQuestion = {
                    id: dialog.id,
                    question: dialog.question,
                    aiReview: dialog.advantage || "",
                    aiStrategy: dialog.deficiency || "",
                    aiDemo: dialog.improvementSuggestion || "",
                  };

                  // 更新评估分数
                  this.answerEval = {
                    professionalism: dialog.majorScore
                      ? dialog.majorScore * 10
                      : 0,
                    completeness: dialog.completeScore
                      ? dialog.completeScore * 10
                      : 0,
                    relevance: dialog.relevanceScore
                      ? dialog.relevanceScore * 10
                      : 0,
                    pros: dialog.advantage || "",
                    cons: dialog.deficiency || "",
                    suggestions: dialog.improvementSuggestion
                      ? [dialog.improvementSuggestion]
                      : [],
                  };

                  // 返回面试官问题和用户回答
                  return [interviewerMessage, userMessage];
                })
                .flat(); // 扁平化数组
            }

            uni.showToast({
              title: "面试详情加载成功",
              icon: "success",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          console.error("获取面试详情失败:", err);
          uni.showToast({
            title: err.message || "获取面试详情失败",
            icon: "error",
          });
        });
    },
  },
  mounted() {
    // 页面初始化逻辑
    // 你可以在这里初始化switchListIcon等
    this.switchListIcon = [{ icon: "play-circle" }, { icon: "pause-circle" }];
    const { windowHeight } = uni.getSystemInfoSync();
    console.log(windowHeight);
    this.anchors = [
      100,
      Math.round(0.35 * windowHeight),
      Math.round(0.7 * windowHeight),
    ];
    this.panelHeight = this.anchors[0];
    this.recordCompleted();
    this.detailId = this.$route.query.detailId;
    if (this.detailId) {
      this.getInterviewDetail(this.detailId);
    } else if (this.chatList.length == 0) {
      this.startTheAnswer();
    }
  },
};
</script>

<style lang="scss" scoped>
.practice-container {
  background: #f7fafc;
  min-height: 100vh;
  overflow: hidden;
}
.practice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx ;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #f7fafc;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.practice-header-actions {
  display: flex;
  gap: 10rpx;
  align-items: center;
}
.header-action {
  margin-right: 2rpx;
}
.recording-status {
  color: #fa3534;
  font-size: 26rpx;
  font-weight: bold;
}
.practice-avatar-area {
  position: relative;
  width: 100%;
  margin-top: 120rpx;
  overflow-y: auto;
  padding: 4rpx 1rem;
  height: 100%;
  box-sizing: border-box;
}
.main-avatar {
  width: 100%;
  height: calc(100vh - 260rpx);
  object-fit: cover;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.user-avatar-box {
  display: none;
}
.user-avatar-card {
  position: absolute;
  top: 18rpx;
  right: 38rpx;
  width: 160rpx;
  height: 180rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.13);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}
.user-avatar-img {
  width: 100%;
  height: 130rpx;
  object-fit: cover;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}
.user-avatar-footer {
  background: rgba(34, 34, 34, 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50rpx;
  font-size: 22rpx;
  font-weight: 500;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
}
.user-id {
  color: #fff;
  font-size: 22rpx;
  margin-left: 2rpx;
}
.practice-question-area {
  color: #fff;
  position: absolute;
  top: -210rpx;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.question-text {
  font-size: 28rpx;
  line-height: 1.7;
  text-align: left;
  background: rgba(0, 0, 0, 0.7);
  padding: 20rpx;
}
.answer-btn {
  width: 40%;
  border-radius: 32rpx;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 40rpx;
  margin-bottom: 10rpx;
}
.practice-tabs-card {
  background: #fff;
  border-radius: 18rpx 18rpx 0 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 10;
}

.practice-tabs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: transparent;
  border-radius: 0 0 18rpx 18rpx;
  padding: 0 24rpx;
  height: 90rpx;
}
.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #888;
  font-weight: 500;
  position: relative;
  height: 100%;
  cursor: pointer;
  transition: color 0.2s;
}
.tab-item.active {
  color: #36d1c4;
  font-weight: bold;
}
.tab-underline {
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  bottom: 0;
  height: 6rpx;
  background: #36d1c4;
  border-radius: 6rpx;
}
.practice-qa-section {
  margin: 32rpx 24rpx 0 24rpx;
  display: flex;
  flex-direction: column;
  max-height: 55vh;
  overflow-y: auto;
}
.qa-card {
  background: #fff;
  border-bottom: 1rpx solid #ededed;
  padding: 24rpx 20rpx;
  .qa-label {
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .qa-content {
    font-size: 26rpx;
    color: #333;
    line-height: 1.7;
  }
}
.user-answer-card {
  margin-top: 0;
}
.user-answer-title {
  font-size: 28rpx;
  color: #222;
  margin-bottom: 18rpx;
  font-weight: bold;
}
.user-answer-eval {
  margin-bottom: 18rpx;
}
.user-answer-eval-label {
  font-size: 24rpx;
  color: #888;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.user-answer-score-row {
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
}
.user-answer-score-label {
  width: 80rpx;
  color: #666;
  font-size: 24rpx;
}
.user-answer-score-bar-bg {
  flex: 1;
  height: 14rpx;
  background: #e6f7f4;
  border-radius: 8rpx;
  margin: 0 12rpx;
  position: relative;
  overflow: hidden;
}
.user-answer-score-bar {
  height: 100%;
  background: #36d1c4;
  border-radius: 8rpx;
}
.user-answer-score-value {
  width: 40rpx;
  color: #333;
  font-size: 24rpx;
  text-align: right;
}
.user-answer-adv-row {
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
}
.user-answer-adv-label {
  color: #36d1c4;
  font-weight: bold;
  font-size: 24rpx;
  margin-right: 8rpx;
}
.user-answer-adv-content {
  color: #333;
  font-size: 24rpx;
}
.user-answer-bad-row {
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
}
.user-answer-bad-label {
  color: #fa3534;
  font-weight: bold;
  font-size: 24rpx;
  margin-right: 8rpx;
}
.user-answer-bad-content {
  color: #333;
  font-size: 24rpx;
}
.user-answer-suggest-title {
  font-size: 24rpx;
  color: #222;
  font-weight: bold;
  margin: 18rpx 0 8rpx 0;
}
.user-answer-suggest-list {
  margin-left: 16rpx;
  color: #666;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}
.practice-result-section {
  margin: 32rpx 24rpx 0 24rpx;
  display: flex;
  flex-direction: column;
  max-height: 55vh;
  overflow-y: auto;
}
.result-score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  right: 50rpx;
}

.result-score-value {
  font-size: 60rpx;
  color: #36d1c4;
  font-weight: bold;
}
.result-score-desc {
  font-size: 28rpx;
  color: #36d1c4;
  font-weight: bold;
}
.result-analysis-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding: 24rpx 0 32rpx 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.result-analysis-title {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  margin-left: 32rpx;
  margin-bottom: 12rpx;
}
.result-analysis-chart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.result-radar-img {
  width: 220rpx;
  height: 180rpx;
  display: block;
}
.result-summary-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding: 28rpx 28rpx 24rpx 28rpx;
  margin-bottom: 12rpx;
}
.result-summary-title {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 12rpx;
}
.result-summary-content {
  font-size: 25rpx;
  color: #444;
  line-height: 1.8;
  word-break: break-all;
}
.result-suggest-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding: 28rpx 28rpx 24rpx 28rpx;
}
.result-suggest-title {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 12rpx;
}
.result-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.result-suggest-item {
  display: flex;
  align-items: flex-start;
}
.result-suggest-item-main {
  flex: 1;
}
.result-suggest-item-title {
  font-size: 25rpx;
  color: #36d1c4;
  font-weight: bold;
  margin-bottom: 2rpx;
}
.result-suggest-item-desc {
  font-size: 24rpx;
  color: #444;
  line-height: 1.7;
}
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 32rpx 0 360rpx 0;
  background: #f7fafc;
}
.chat-message {
  display: flex;
  margin-bottom: 24rpx;
  gap: 12rpx;
  position: relative;
}
.chat-message.interviewer {
  flex-direction: row;
  align-items: flex-start;
}
.chat-message.user {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
}

.chat-message.user .chat-avatar {
  order: 2;
}

.chat-message.user .chat-bubble {
  order: 1;
}
.chat-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #eafaf3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.chat-avatar.interviewer {
  background: #36d1c4;
}
.chat-avatar.user {
  background: #bbb;
}
.chat-bubble {
  max-width: 60vw;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding: 20rpx 24rpx;
  font-size: 26rpx;
  line-height: 1.7;
  background: #fff;
  color: #333;
  position: relative;
}
.chat-bubble.interviewer {
  background: #fff;
  color: #333;
}
.chat-bubble.user {
  background: #eafaf3;
  color: #333;
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}
.chat-name {
  font-size: 22rpx;
  color: #36d1c4;
  font-weight: bold;
}
.chat-message.user .chat-name {
  color: #888;
}
.chat-time {
  font-size: 20rpx;
  color: #bbb;
}
.chat-text {
  white-space: pre-line;
  word-break: break-all;
}
.voice-panel {
  margin: 32rpx auto 0 auto;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  padding: 32rpx 0 24rpx 0;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120px;
  position: absolute;
 top: -210px;
 left: 0;
 right: 0;
}
.voice-hint {
  color: #888;
  font-size: 26rpx;
  margin-top: 20px;
  margin-bottom: 24px;
}
.voice-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.voice-btn {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: #eafaf3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(54, 209, 196, 0.08);
  padding: 0;
}

.avatar-left {
  top: -18px;
  left: -18px;
}
.avatar-right {
  top: -18px;
  right: -18px;
}
.chat-bubble {
  position: relative;
}
.avatar-icon-left {
  position: absolute;
  top: 0;
  left: -40px;
  z-index: 2;
  border: 1px solid #36d1c4;
  border-radius: 50%;
  padding: 4rpx;
}
.avatar-icon-right {
  position: absolute;
  top: 0;
  right: -40px;
  z-index: 2;
  border: 1px solid #bbb;
  border-radius: 50%;
  padding: 4rpx;
}
::v-deep .l-floating-panel__header-bar {
  width: 200rpx !important;
}

/* 语音输入遮罩层样式 */
.voice-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40rpx;
  box-sizing: border-box;
}

.voice-box {
  width: 600rpx;
  height: 400rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  margin-bottom: 40rpx;
}

.camera-view {
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.asr-text-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  box-sizing: border-box;
  color: #fff;
}

.asr-text {
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  word-break: break-all;
  max-height: 100%;
  overflow-y: auto;
}

.wave-container {
  margin-bottom: 40rpx;
}

.wave-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  height: 60rpx;
}

.wave-item {
  width: 8rpx;
  height: 20rpx;
  background: #ddd;
  border-radius: 4rpx;
  transition: all 0.3s ease;
}

.wave-item.wave-active {
  animation: waveAnimation 1.2s ease-in-out infinite;
}

@keyframes waveAnimation {
  0%,
  100% {
    height: 20rpx;
    background: #36d1c4;
  }
  50% {
    height: 60rpx;
    background: #ff4444;
  }
}

.end-answer-btn {
  width: 240rpx;
  height: 80rpx;
  background: #ff4444;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 68, 68, 0.3);
  transition: all 0.3s ease;
}

.end-answer-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(255, 68, 68, 0.4);
}

.loading-dots {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 20rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  background: #36d1c4;
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

.dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes dotPulse {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 输入模式切换tabs样式 */
.input-mode-tabs {
  display: flex;
  background: #f5f5f5;
  border-radius: 8rpx;
  padding: 4rpx;
  margin-bottom: 24rpx;
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  width: 160rpx;
  z-index: 10;
}

.input-mode-tabs .tab-item {
  flex: 1;
  text-align: center;
  padding: 8rpx 12rpx;
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #666;
  transition: all 0.3s ease;
  cursor: pointer;
}

.input-mode-tabs .tab-item.active {
  background: #4ecdc4;
  color: #fff;
  font-weight: bold;
}

/* 语音输入区域样式 */
.voice-input-section {
  text-align: center;
  padding: 20rpx 0;
}

/* 文字输入区域样式 */
.text-input-section {
  padding: 20rpx 0;
  padding-top: 70rpx;
}

.text-hint {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
  text-align: center;
}

.answer-textarea {
  margin-bottom: 20rpx;
  width: 300px;
 height: 100px;
  padding: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.answer-textarea:focus {
  border-color: #4ecdc4;
  outline: none;
  box-shadow: 0 0 0 2rpx rgba(78, 205, 196, 0.1);
}

.answer-textarea::placeholder {
  color: #999;
}

/* 操作按钮区域样式 */
.action-buttons {
  display: flex;
  gap: 16rpx;
 position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 10;
}

.send-btn,
.end-btn {
  height: 60rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
}

/* 面试结束弹窗样式 */
.exit-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-modal-container {
  background: #fff;
  border-radius: 20rpx;
  width: 70vw;
  max-width: 600rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.exit-modal-content {
  padding: 60rpx 40rpx 40rpx 40rpx;
  text-align: center;
}

.exit-modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
}

.exit-modal-message {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 40rpx;
}

.exit-modal-buttons {
  display: flex;
  gap: 24rpx;
}

.exit-modal-cancel-btn {
  flex: 1;
  height: 80rpx;
  background: #f5f5f5 !important;
  color: #666 !important;
  border: none !important;
  border-radius: 16rpx !important;
  font-size: 28rpx !important;
  font-weight: 500 !important;
}

.exit-modal-confirm-btn {
  flex: 1;
  height: 80rpx;
  background: #4ecdc4 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 16rpx !important;
  font-size: 28rpx !important;
  font-weight: 500 !important;
  box-shadow: 0 4rpx 12rpx rgba(78, 205, 196, 0.3);
}

.exit-modal-confirm-btn:active {
  transform: scale(0.98);
}

.exit-modal-cancel-btn:active {
  transform: scale(0.98);
}

/* 头部下拉菜单样式 */
.header-menu-container {
  position: relative;
}

.header-dropdown-menu {
  position: absolute;
  top: 40rpx;
  right: 0;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  z-index: 100;
  min-width: 200rpx;
  padding: 16rpx 0;
  animation: menuFadeIn 0.2s ease-out;
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-item {
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-end-btn {
  width: 100%;
  height: 60rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  background: #ff4444 !important;
  color: #fff !important;
  border: none !important;
}

/* 菜单背景遮罩层 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: transparent;
}
</style>
